<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>景旭商城-我的推广码</title>
<%@ include file="/page/pc/include.jsp"%>
</head>
<body>
	<div class="wrap">
		<jsp:include page="_my_header.jsp" />
		<div class="site_wrap18">
			<div class="site_wrap18_con">
				<div class="main">
					<jsp:include page="_my_left.jsp" />
					<div class="rightitem">

						<div class="dd_part">
							<div class="hd">
								<h3>我的推广码</h3>
							</div>
							<div class="bd">
								<div class="dd_part1">
									<div class="bd1" style="padding-top:20px">
										<div class="mytable2">
											<div class="bd3">
												<div class="tg_list">
													<ul>
														<li>
															<div class="hd2" style="margin-bottom:0">
																<h3>二维码推广信息</h3>
															</div>
															<div class="boxs_1">
																<div class="pic">
																	<input type="hidden" id="inviationCode" value="${inviationCode }"/>
																	<div style="display:none;" id="inviationQrcode" align="center"></div>
																	<div id="qrCodeDiv"></div>
																</div>
																<div class="item-info">
																	<h2>请把左侧二维码下载后，可以分享至其他平台以供更多的人注册关注</h2>
																	<h3><a href="javascript:void(0);" onclick="downloadQrImage();">下载二维码</a></h3>
																</div>
															</div>
														</li>
														<li>
															<div class="hd2" style="margin-bottom:0">
																<h3>注册码推广信息</h3>
															</div>
															<div class="boxs_1">
																<div class="pic">
																	<p id="inviationCodeP">${inviationCode }</p>
																</div>
																<div class="item-info">
																	<h2>请把左侧二维码下载后，可以分享至其他平台以供更多的人注册关注</h2>
																	<h3><a id="copyBtn" href="javascript:void(0);" data-clipboard-action="copy" data-clipboard-target="#inviationCodeP">复制</a></h3>
																</div>
															</div>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div>
		<!---网站底部开始-->
		<jsp:include page="../footer.jsp?showQaFlag=0" />
		<!---网站底部结束-->
	</div>
	<script type="text/javascript" src="<%=basePath%>/statics/js/jquery.qrcode.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/statics/js/clipboard.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var inviationCode = $("#inviationCode").val();
			$("#inviationQrcode").qrcode({
				render:"canvas",
				width:150,
				height:150,
				text:inviationCode
			});
			var canvasQrcode = document.getElementById("inviationQrcode").childNodes[0];
			var img = convertCanvasToImage(canvasQrcode);
			$("#qrCodeDiv").find("img[id='qrCodeImage']").remove();
			$("#qrCodeDiv").append(img);
		})
		//复制
		var clipboard = new Clipboard('#copyBtn');
		clipboard.on('success', function(e){
			layer.msg('已复制到剪切板', {
				time : 1000
			});
		});
		clipboard.on('error', function(e){
			layer.msg('复制失败，请手动选中复制', {
				time : 1000
			});
		});
		//下载二维码
		function downloadQrImage(){
			var img = $("#qrCodeImage").attr("src");
			var alink = document.createElement("a");
			alink.href = img;
			alink.download = "我的分享码.jpg";
			alink.click();
		}
		//从 canvas 提取图片 image 
		function convertCanvasToImage(canvas) {
			var image = new Image();
			image.src = canvas.toDataURL("image/png");
			image.id = "qrCodeImage";
			image.width = "2.6rem";
			image.height = "2.6rem";
			return image;
		}
	</script>
</body>
</html>